<template>
  <!-- 主页导航栏及频道列表左右划拉页面 频道管理界面-->
  <div class="home">
    <van-nav-bar>
      <template #left>
        <!-- //webpick打包后图片src路径可能变了，显示会裂开 -->
        <!-- fit="contain"-在布局中保持原始图像宽度 -->
        <van-image
          :src="require('../../assets/logo.png')"
          width="120"
          fit="contain"
        />
      </template>
      <template #right>
        <van-button
          class="btn-search"
          icon="search"
          type="primary"
          round
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- v-model="active"跟频道列表下标双向绑定，通过vue查看 -->
    <van-tabs v-model="active" class="my-tabs">
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <!-- 每个频道下的新闻列表 -->
        <article-list :channel_id="item.id" />
      </van-tab>
      <van-icon class="icon-channel" name="wap-nav" @click="show = true" />
    </van-tabs>

    <!-- 频道管理界面  传给子组件-->
    <!-- 封装的组件$event不是事件对象，而是子组件传过来的值 -->
    <van-action-sheet v-model="show" title="频道管理">
      <!-- <channel-edit
        :ownChannels="channels"
        :allChannels="allChannels"
        :value="active"
        @in put="active = $event"
        @close="show = false"
      /> -->
      <!-- 自定义频道 -->
      <!-- v-model="active"  等于 父传子 :value="active" 等于  子传父  @input="active = $event" -->
      <channel-edit
        :ownChannels="channels"
        :allChannels="allChannels"
        v-model="active"
        @close="show = false"
      />
    </van-action-sheet>
    <!-- 
    <van-popup v-model="Popshow" style="width: 60%">
      <van-cell title="不敢兴趣" />
      <van-cell title="反馈垃圾内容" is-link />
      <van-cell title="拉黑作者" @click="Pop" />
    </van-popup> -->
  </div>
</template>

<script>
import { channelsAPI, channelsAllAPI } from "@/api";
import { setChannel, getChannel, removeChannel } from "@/utils/storage";

import articleList from "./articleList.vue";
import channelEdit from "./channelEdit.vue";
export default {
  name: "home",
  components: {
    articleList,
    channelEdit,
  },
  data() {
    return {
      show: false,
      channels: [], //用户频道保存数组
      allChannels: [], //所有频道保存数组

      active: 0, //我的频道 点中的下标
      close: false,

      Popshow: false,
      // feedbackshow: false,//多项拉黑
    };
  },

  async created() {
    // //登录了
    // if (this.$store.state.tokenObj.token) {
    //   //1. 发请求获取用户自己的频道;
    //   let res = await channelsAPI();
    //   // console.log(res); //拿到res第一时间看数据是什么类型，并用data保存起来
    //   this.channels = res.data.data.channels;
    // } else {
    //   //没登录

    //   let res = getChannel();
    //   if (res) {
    //     //没登录但是曾经拜访过//将第一次登录编辑的信息赋值给我的频道
    //     this.channels = res;
    //   } else {
    //     //没登录过，第一次拜访
    //     let res = await channelsAPI();
    //     this.channels = res.data.data.channels; //第一次登录有单独的首次拜访信息
    //   }
    // }
    //优化版本
    // 1.登录了及第一次进入网页没登录的需要发请求，拿到我的频道
    // 2.曾经拜访过但是没登录通过本地存储拿到我的频道
    let local = getChannel();
    //！getChannel()这么写无法运行
    if (this.$store.state.tokenObj.token || !local) {
      // 1.登录了或第一次进入网页没登录的需要发请求，拿到我的频道
      let res = await channelsAPI();
      this.channels = res.data.data.channels;
    } else {
      // 2.曾经拜访过但是没登录通过本地存储拿到我的频道
      this.channels = local;
    }

    //2. 获取所有频道
    let res2 = await channelsAllAPI();
    // console.log(res2); //一打印用数组存起来 Array（25）
    this.allChannels = res2.data.data.channels;
  },

  // methods: {
  //   Pop() {
  //     this.Popshow = false;
  //     this.$toast.success("拉黑成功");
  //   },
  // },
};
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  .btn-search {
    background-color: rgba(255, 255, 255, 0.2);
    width: 100px;
    height: 30px;
    border: none;
    .van-icon-search {
      color: #fff;
    }
  }
  .my-tabs {
    ::v-deep .van-tabs__wrap {
      width: 90%;
    }
    .icon-channel {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      width: 10%;
      text-align: center;
    }
  }
}
</style>
